<template>
  <div id="navBar">
    <el-menu
        router
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item index="/welcome">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">OverView</template>
        <el-menu-item index="2-1">添加用户</el-menu-item>
        <el-menu-item index="2-2">删除用户</el-menu-item>
        <el-menu-item index="2-3">查询用户</el-menu-item>
        <el-menu-item index="2-4">修改用户</el-menu-item>

        <el-submenu index="2-5">
          <template slot="title">管理员个人资料</template>
          <el-menu-item index="2-5-1">修改管理员密码</el-menu-item>
          <el-menu-item index="2-5-2">注销管理员账户</el-menu-item>
          <el-menu-item index="2-5-3">其他设置</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>最新资讯</el-menu-item>
      <el-submenu index="4">
        <template slot="title">Nut生态</template>
        <el-menu-item index="4-1"><el-link href="#" target="_blank">Gitee</el-link></el-menu-item>
        <el-menu-item index="4-2"><el-link href="#" target="_blank">CSDN</el-link></el-menu-item>
        <el-menu-item index="4-3"><el-link href="#" target="_blank">Gitee</el-link></el-menu-item>
      </el-submenu>
      <el-menu-item>
        <el-link href="/console/index">
          管理员工作台
        </el-link>
      </el-menu-item>
      <el-menu-item>
        <el-link href="/login">
          登录/注册
        </el-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      activeIndex: '/welcome'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {
    this.activeIndex = window.location.pathname;
  }
}
</script>

<style scoped>
.el-link{
  color: #FFF;
}
</style>